<template>
  <div>
    <div class="page2">
      <div class="register">
        <div class="registercon">
          <div>欢迎登陆小U商城</div>
          <div class="reoimg">
            <img src="../../assets/images/logo2.png" alt="" />
          </div>
          <form action="#" class="ouser">
            <p><input type="text" placeholder="手机号"  v-model="user.phone"/></p>
            <p>
              <input type="text" placeholder="昵称" v-model="user.nickname"/>
            </p>
            <p>
              <input type="text" placeholder="密码" v-model="user.password"/>
            </p>
            <input type="submit" value="注册" @click="submit()" />
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { register } from "../../request/api.js";
export default {
  data() {
    return {
      user: {
        phone: "",
        nickname: "",
        password: "",
      },
    };
  },
  methods: {
    submit() {
      register(this.user).then((res) => {
        if (res.data.code == 200) {
          // 注册成功的提示
          Toast.success(res.data.msg);
          // 跳转到登录页
          this.$router.push("/login");
        } else {
          // 注册失败的提示
          Toast.fail(res.data.msg);
        }
      });
    },
  },
  components: {},
  mounted() {},
  destroyed() {},
};
</script>
<style scoped>
@import url(../../assets/css/public.css);
@import url(../../assets/css/register.css);
 .ouser input[type="text"]{
    width: 100%;
    height: .78rem;
    font:.24rem "微软雅黑";
    color:#6E6E6E;
    margin-top:.2rem;

    border: 1px solid #f7f7f7;
}
 .ouser p:nth-child(2){
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ouser p:nth-child(2) a{
        display: block;
        width: 1.6rem;
        height: .48rem;
        background-color: #CCCCCC;
        font:.2rem/.48rem "微软雅黑";
        color:#ffffff;
        text-align: center;
}
 .ouser input[type="submit"]{
            width: 6.1rem;
            height: .98rem;
            background-color: #CCCCCC;
            color:#ffffff;
            font:.3rem/.98rem "微软雅黑";
            text-align: center;
    }
</style>